<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../admin/css/other/console.css"/>
</head>

<body>

<div class="layui-timeline" id="timeline-container">

    <div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月18日</h3>
            <p>
                多年前，Layui 2.0 的发布前夜，记录着这样的一段心理活动。
                <br>这是一个怎样的版本？它将受众如何？
                <br>又是谁在指引着我去创作，是基于成就感的驱动，还是试图建立我与客观世界的某种沟通 <i
                        class="layui-icon"></i>
            </p>
        </div>
    </div>


</div>

<script>
    layui.use(['jquery', 'layer'], function () {

        console.log("开始加载")
        var $ = layui.jquery
        var layer = layui.layer

        // 加载时间线数据
        function loadTimeline() {
            $.get('/data/items', function (res) {
                if (res.code === 0 && res.data.length > 0) {
                    renderTimeline(res.data);
                }
            }).fail(function () {
                layer.msg('加载失败', {icon: 2});
            });
        }

        // 渲染时间线
        function renderTimeline(items) {
            var html = '';
            items.forEach(function (item) {
                html += `<div class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">${item.title}</h3>
            <p>
               ${item.content}
            </p>
        </div>
    </div>`;
            });
            $('#timeline-container').html(html);
        }

        // 初始化加载
        loadTimeline();
        console.log("开始加载")

    });
</script>
</body>

</html>